<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20210902124邵文杰</title>
    <script src="node_modules\vue\dist\vue.js"></script>
    <style>
        .dashed-underline {
            border-bottom: 1px dashed black;
        }
        
        .solid-circle {
            list-style-type: disc;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>图书详情</h3>
        <ul>
            <li v-for="(publisher, index) in books" :key="index">
                <p>{{ publisher.name }}</p>
                <p>{{publisher.name2}}</p>
                <ul>
                    <li v-for="(book, bookIndex) in publisher.books" :key="bookIndex" class="solid-circle">
                        <span v-if="typeof book === 'object'">{{ book.title }}</span>
                        <span v-else>{{ book }}</span>
                    </li>
                </ul>
                <hr class="dashed-underline">
            </li>
           
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                books: [
                    {
                        name: '吉林大学出版社',
                        name2:'零基础学Python（全彩版）' 
                        
                    },
                    {
                        name: '人民邮电出版社',
                        name2:'出版图书',
                        books: [
                            { title: 'HTML+CSS移动Web开发实战' },
                            { title: '数学之美' }
                        ]
                    }
                ]
            }
        });
    </script>
</body>

</html>
